<template>
  <div class="form-box">
    <el-form ref="ruleForm" :rules="rules" :model="itemInfo" label-width="auto">
      <el-form-item label="导入数据：" prop="marqueeData">
        <el-button type="warning" @click="downLoad">下载模板</el-button>
        <el-button type="warning" @click="importData">导入模板</el-button>
        <span style="margin-left:20px">
          当前导入{{ itemInfo.marqueeData.length }}条
        </span>
      </el-form-item>
      <el-form-item label="设置字号：" prop="fontSize">
        <el-select
          clearable
          style="width:15%"
          v-model="itemInfo.fontSize"
          placeholder="请选择字号"
        >
          <el-option
            v-for="item in fontSize"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设置字体颜色：">
        <el-color-picker v-model="itemInfo.color" show-alpha> </el-color-picker>
      </el-form-item>
    </el-form>
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @getSerial="getSerial"
    ></importDialog>
  </div>
</template>
<script>
import importDialog from '@common/importDialog'
export default {
  props: ['itemInfo'],
  components: { importDialog },
  data() {
    return {
      importDialogData: {
        url: '',
        title: '跑马灯导入',
        type: 'physicalOrders',
        isShow: false
      },
      fontSize: [12, 14, 16, 18, 20, 24],
      rules: {
        marqueeData: [{ required: true, message: '请导入数据' }],
        fontSize: [{ required: true, message: '请选择字号', trigger: 'change' }]
      }
    }
  },
  methods: {
    /* 下载模板 */
    downLoad() {
      const url = '/landing-pages/template/download'
      this.downFile('get', url, '', '跑马灯模板')
    },
    /* 导入数据 */
    importData() {
      this.importDialogData.url = '/landing-pages/analysis'
      this.importDialogData.isShow = true
    },
    /* 导入成功 */
    getSerial(val) {
      this.$message.success('全部导入成功')
      this.itemInfo.marqueeData = val
    },
    /* 收集数据 */
    collectData() {
      let flag = false
      this.$refs['ruleForm'].validate((valid) => {
        flag = valid ? true : false
      })
      return flag ? this.itemInfo : false
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.upload_btn) {
  margin-top: 4px;
}
</style>
